<template>
  <div class="achievementMonth">
    <div>
      报表名称
      <el-input class="w200 ml20 mr20" v-model="reportName"></el-input>
      <el-button type="primary" @click="getReMonthList" id="monitorEnter">查询</el-button>
      <el-button type="primary" @click="goCreateReport">生成报表</el-button>
    </div>
    <el-table :data="tableData" class="mt20" border style="width: 100%">
      <el-table-column type="index" align="center" label="序号" width="80"></el-table-column>
      <el-table-column prop="reportFormName" align="center" width="280" label="报表名称"></el-table-column>
      <el-table-column prop="month" align="center" label="月份"></el-table-column>
      <el-table-column
        v-for="(item, index) in tableRowList"
        :key="index"
        align="center"
        :prop="item.props"
        :label="item.label + '营收分配明细(元)'"
      >
        <template slot-scope="scope">
          <a href="javascript:;;" class="handleA" @click="goDetail(scope.row, item.props)">
            {{scope.row[item.props]
            | splitWord}}
          </a>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button @click="goDetail(scope.row,'detail')" type="text">查看</el-button>
          <el-button @click="reportTable(scope.row)" type="text">导出</el-button>
          <el-button @click="settlement(scope.row)" :disabled="scope.row.settlementMark !== 0" type="text">结算</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script type="text/ecmascript-6">
import api from "@/api/apiPath";
import utils from "@/common/utils.js"

export default {
  name: "achievementMonth",
  title: "业绩激励",
  data() {
    return {
      tableRowList: [],
      tableData: [],
      tableConfig: {
        pageSize: 10,
        pageNum: 1,
        totalSize: 10
      },
      reportName: ""
    };
  },
  created() {
    this.getReMonthList();
  },
  activated() {
    this.getReMonthList();
  },
  mounted() {},
  filters: {
    splitWord(value) {
      if (value) {
        return value.split("|")[0];
      } else {
        return "——";
      }
    }
  },
  methods: {
    reportTable(val) {
      this.$axios.service({
        method: "post",
        url: '/commallocation/export/downloadZip',
        data: {reportAllotMonthId:val.id,name:val.reportFormName,month:val.month},
        headers: {
          "content-type": "application/json; charset=utf-8",
          token: sessionStorage.getItem("cmsUser")
            ? JSON.parse(sessionStorage.getItem("cmsUser")).tokenId
            : ""
        },
        responseType: "blob"
      })
      .then(res => {
        this.downloadFile(res.data);
      })
      .catch(res => {
        this.downloadFile(res.data);
      });
    },
    // 导出
    downloadFile(data) {
      let blob = new Blob([data], {type: 'application/zip'})
      let url = window.URL.createObjectURL(blob)
      const link = document.createElement('a') // 创建a标签
      link.href = url
      link.download = `导出${utils.getTimeString(new Date())}` // 重命名文件
      link.click()
      URL.revokeObjectURL(url) // 释放内存
    },
    settlement(val) {
      this.$confirm("是否结算，结算后不可更改报表，是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
      .then(() => {
          this.$axios.post("/commallocation/revenue/allot/month/list/settle",{id:val.id}).then(res => {
            this.$message({
              type: "success",
              message: "操作成功!"
            });
            this.getReMonthList();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    getReMonthList() {
      this.axios
        .post(api.getReMonthList, {
          reportName: this.reportName,
          pageSize: this.tableConfig.pageSize,
          pageNum: this.tableConfig.pageNum
        })
        .then(res => {
          this.tableConfig.totalSize = res.data.data.total;
          this.tableData = res.data.data.data;
          this.tableRowList = res.data.data.developers;
        });
    },
    goCreateReport() {
      this.$router.push({ path: "/achievementMonthReport" });
    },
    goDetail(row, props) {
      //查看功能默认查看列表的第一个
      if (props == 'detail') {
          props = this.tableRowList[0].props
      }
      let devList = [];
      this.tableRowList.forEach(item => {
        if (row[item.props]) {
          devList.push({
            devName: item.label,
            devId: row[item.props].split("|")[1]
          });
        }
      });
      window.sessionStorage.setItem("AMDEVLIST", JSON.stringify(devList));
      if (row[props]) {
        this.$router.push({
          path: "/achievementMonthDetail",
          query: {
            developerId: row[props].split("|")[1],
            id: row.id,
            month: row.month,
            settlementMark: row.settlementMark
          }
        });
      }
    }
  },
  components: {},
  computed: {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.handleA {
  text-decoration: none;
}
</style>
